<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1> {{ name }} </h1>
        <button @click="setName"> 点击修改 name </button>
    </div>
</body>
<script>
    const { reactive, toRefs } = Vue
    const app = Vue.createApp({
        setup (props, context) {

            const obj = reactive({
                name: '张一',
                age: 18,
                h: 178
            })

            // 被解构出来的数据 是不具备响应式的
            // let { name } = obj

            // 如果想让被解构出来的数据也具备响应式，那么可以使用 toRefs 解决
            let { name } = toRefs(obj)

            function setName () {
                // 设置值的时候需要 .value 进行设置
                name.value = '张三'
            }

            return {
                name,
                setName
            }
        },
    })
    app.mount('#app')
</script>

</html>